import React, { useState, useDeferredValue } from 'react';

export default () => {
  const [inputValue, setInputValue] = useState('');
  const deferredInputValue = useDeferredValue(inputValue);

  // 模拟一个耗时的计算
  const computeExpensiveResults = (query) => {
    let results = [];
    for (let i = 0; i < 10000; i++) {
      results.push(`${query} - Result ${i}`);
    }
    return results;
  };

  const results = computeExpensiveResults(deferredInputValue);

  return (
    <div>
      <h1>Search with useDeferredValue</h1>
      <input
        type="text"
        value={inputValue}
        onChange={(e) => setInputValue(e.target.value)}
        placeholder="Type to search..."
      />
      <div>
        <h2>Results:</h2>
        <ul>
          {results.map((result, index) => (
            <li key={index}>{result}</li>
          ))}
        </ul>
      </div>
    </div>
  );
}

